<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<%@ include file="/static/include/common.inc"%>
<title>青州市名卡管理系统</title>
<link rel="shortcut icon"
	href="https://github.com/shuaijunlan/Autumn-Framework/raw/master/favicon.ico"
	type="image/x-icon" />
<link rel="stylesheet" href="static/admin/css/layui.css">
<link rel="stylesheet" href="static/admin/css/main.css" media="all">
<script src="static/js/jquery-1.11.2.js"></script>

</head>
<body>
				  <ul class="layui-tab-title">
				    <li class="layui-this">网站设置</li>
				    <li>用户管理</li>
				    <li>权限分配</li>
				    <li>商品管理</li>
				    <li>订单管理</li>
				  </ul>
				  <div class="layui-tab-content">
				    <div class="layui-tab-item layui-show" style="margin:10px"> 
				      <div class="demoTable">
						  <div class="layui-inline">
						    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
						  </div>
						  <button class="layui-btn" data-type="reload">搜索</button>
						</div>
						
						<table class="layui-table" lay-data="{ url:'front/image/message.do', page:true, id:'tableId'}" lay-filter="tablename">
						  <thead>
						    <tr>
						      <th lay-data="{field:'id',  sort: true, fixed: true}">ID</th>
						      <th lay-data="{field:'username', }">用户名</th>
						      <th lay-data="{field:'sex',  sort: true}">性别</th>
						      <th lay-data="{field:'city', }">城市</th>
						      <th lay-data="{field:'sign', }">签名</th>
						      <th lay-data="{field:'experience', sort: true}">积分</th>
						      
						      <th lay-data="{field:'classify'}">职业</th>
						      <th lay-data="{field:'wealth', sort: true,event: 'setSign'}">财富</th>
						      <th lay-data="{field:'score', sort: true, fixed: 'right'}">评分</th>
						      <th lay-data="{fixed: 'right', width:356, align:'center', toolbar: '#barDemo'}"></th>
						    </tr>
						  </thead>
						</table>
								 
						<script type="text/html" id="barDemo">
           					<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
           					<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
           					<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
						</script>
					</div>
				    <div class="layui-tab-item">内容2</div>
				    <div class="layui-tab-item">内容3</div>
				    <div class="layui-tab-item">内容4</div>
				    <div class="layui-tab-item">内容5</div>
				  </div>
	<script src="static/layui_v2.2.3/layui.js" charset="utf-8"></script>         
	<script>
		layui.use('table', function(){
			var table = layui.table;
		  //监听表格复选框选择
		   table.on('checkbox(tablename)', function(obj){
		    console.log(obj)
		  });
		  //监听工具条
		  table.on('tool(tablename)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'detail'){
	
		      layer.msg('ID：'+ data.id + ' 的查看操作');
		    } else if(obj.event === 'del'){		  		    	
		      layer.confirm('真的删除行么', function(index){
		        obj.del();
		        layer.close(index);
		      });
		    } else if(obj.event === 'edit'){		    	    	
	    	 	layer.open({
                skin: 'layui-layer-lan',    
                title: '选择人员',    
                shadeClose: false,    
                move: false,    
                closeBtn:2,  	    			
    		    type: 2,
    		    area: ['700px', '450px'],
    		    fixed: false, //不固定
    		    maxmin: true,
    		    content: 'admin/text.do?id='+data.id+'&username='+data.username
	    		});     		
		    }
		  }); 		
		});

	
		   $(function(){								
				 $(".layui-tab-title") .children("li").click(function () {
					clear();
					$(this).attr("class","layui-this");
					
					$("ul li.layui-this").index();
					$(".layui-tab-content").children("div").eq($("ul li.layui-this").index())
						.attr("class","layui-tab-item layui-show"); 			
			   	 })

			   	 			  			   	
			})
			function clear() {
				$(".layui-tab-title").children("li").each(function () {
					$(this).attr("class","");
				})
				$(".layui-tab-content").children("div").each(function () {
					$(this).attr("class","layui-tab-item");
				})
				
			}
		</script>
</body>
</html>